<template>
    <div>
        <div class="container">
            <el-row  :gutter='4' style='margin-bottom:20px'>
            </el-row>
              <el-table :data="tableData.users" style="width: 100%" border center>
                    <el-table-column prop="name" label="姓名" align="center">
                    </el-table-column>
                    <el-table-column prop="account" label="账号" align="center">
                    </el-table-column> 
                    <el-table-column prop="age" label="年龄" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click='removeUsers(scope.row)' type="text" size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <el-row style='margin-top:150px'>
                <el-col :span='24' style="text-align:center">
                    <el-pagination background 
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="tableData.currentPage" 
                        :page-sizes="[5, 10, 15, 20]" 
                        :page-size="tableData.pageSize" 
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.totalCount">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <el-dialog width='25%' title='新增职位'  :visible.sync='dlgNew' >
            <el-form  :label-position="labelPosition" label-width="60px" >
                <el-form-item label='名称'>
                    <el-input placeholder="名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="radioNew">
                        <el-radio label="1">正常</el-radio>
                        <el-radio label="2">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item  label='描述'>
                    <el-input type="textarea" rows="4" placeholder="描述" ></el-input>
                </el-form-item>             
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dlgNew = false"   size="small">新建</el-button>
            </div>
        </el-dialog>

    </div>
</template>


<script>
    export default {
        name: 'baseform',
        data: function () {
            return {
                form: {
                    name: '职位名称',
                    type:'sys_zhiwei',
                    miaosu:'职位名称列表',
                    state:'1',
                    states:'所有',
                    name2:''
                },
                tableData:{
                    currentPage:1,
                    pageSize:5,
                    totalCount:0,
                    users:[],
                    title:''
                },
                dlgEdit:false,
                dlgMenu:false,
                currentPage:1,
                dlgNew:false,
                labelPosition:'right',
                radioNew:'1'
            }
        },
        methods: {
           list(){
            //    this.$router.push('/dicList/1')
            // console.log(56)
           },
           getUser(){
               this.$axios.post("/admins/getUser",{...this.tableData})
               .then( res => {
                   console.log(res.data)
                   this.tableData = res.data
                //    console.log(this.tableData.currentPage)
               } )
           },
           removeUsers(row){
            //    console.log(row)
               this.$axios.post("/admins/removeUser",{_id:row._id})
               .then( res => {
                //    console.log(res)
                   if(res.data){
                       this.getUser()
                   }
               } )
           },
            handleSizeChange(e){
                this.tableData.pageSize=e;
                this.getUser();
            },
            handleCurrentChange(e){
                this.tableData.currentPage=e;
                this.getUser();
            },
        },
  
        mounted() {
            this.getUser()
            // this.removeUsers()
        },
    }

</script>

<style scoped>
 .el-button+.el-button{
        margin-left:0px;
    }
</style>
